import { Link } from "umi";
import { Space } from 'antd';
import { useState,useEffect } from 'react';
import { ArrowLeftOutlined } from '@ant-design/icons';
import type { RadioChangeEvent } from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import {editSubject,getSubject} from '@/services/settings/subjectRequest'

import { Button, Form, Select, Input, message, Radio, Checkbox } from 'antd';
import './Service.less'
const formItemLayout = {
    labelCol: {
        xs: { span: 40 },
        sm: { span: 10 },
    },
    wrapperCol: {
        xs: { span: 40 },
        sm: { span: 30 },
    },
};//表格
const { Option } = Select;

function subjectService() {
    // 获取form
    const [addform] = Form.useForm();
    
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
    };
    // 保存成功的消息提示
    const [messageApi, contextHolder] = message.useMessage();
    const success = () => {
        messageApi.open({
            type: 'success',
            content: '保存成功',
        });
    };
    // 单选框
    const [value, setValue] = useState(1);
    // 复选
    const plainOptions = ['客户', '供应商', '职员'];

    const onChangeRadio = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    const onChangeChecbox = (checkedValues: CheckboxValueType[]) => {
        console.log('checked = ', checkedValues);
    };
    return <div>
        {contextHolder}
        <Link style={{
            color: 'black',
            display: 'flex',
            justifyContent: 'flex-end',
            padding: '20px',
            height: '20px'
        }} to={'/home/settings/subject/subjectManage'}>
            <Space className='subjectSpace'>
                <ArrowLeftOutlined />返回
            </Space>
        </Link>
        <div className="subjectForm">
            <div>已使用的科目不支持修改</div>
            <Form
                {...formItemLayout}
                form={addform}
                name="register"
                onFinish={onFinish}
                initialValues={{ residence: ['zhejiang', 'hangzhou', 'xihu'], prefix: '86' }}
            >
                <Form.Item
                    name="nickname"
                    label="科目编号："
                    rules={[{ required: true, message: 'Please input your nickname!', whitespace: true },
                {pattern:/^[\\u4E00-\\u9FA5A-Za-z0-9]{2,50}$/,message:'科目编号必须是2-50个字符'}]}
                >
                    <Input placeholder='请完整填会计科目编号' />
                </Form.Item>
                <Form.Item
                    name="nickname"
                    label="科目名称："
                    rules={[{ required: true, message: 'Please input your nickname!', whitespace: true },
                {pattern:/^[\\u4E00-\\u9FA5A-Za-z0-9]{2,20}$/,message:'科目名称必须是2-20个字符'}]}

                >
                    <Input placeholder='请完整填会计科目名称' />
                </Form.Item>
                <Form.Item
                    name="gender"
                    label="上级科目"
                    rules={[{ required: true, message: 'Please input your nickname!', whitespace: true }]}

                >
                    <Select placeholder='1001库存现金'>
                        <Option value="internet">互联网</Option>
                        <Option value="commerce">电商</Option>
                        <Option value="finance">金融</Option>
                        <Option value="husbandry">畜牧业</Option>
                        <Option value="service">服务行业</Option>
                        <Option value="imports ">进出口</Option>
                        <Option value="other">其它</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="gender"
                    label="科目类别"
                    rules={[{ required: true, message: 'Please select gender!' }]}
                >
                    <Select placeholder="资产类">
                        <Option value="new">新会计准则</Option>
                        <Option value="peanuts">小企业会计准则</Option>
                        <Option value="special">特殊业务会计准则</Option>
                    </Select>
                </Form.Item>
                {/* 单选 */}
                <Form.Item name="radio" label="余额方向" rules={[{ required: true, message: 'Please pick an item!' }]}>
                    <Radio.Group onChange={onChangeRadio} value={value}>
                        <Radio value={1}>借</Radio>
                        <Radio value={2}>贷</Radio>
                    </Radio.Group>
                </Form.Item>
                {/* 复选框 */}
                <Form.Item name="checbox" label="辅助核算">
                    <Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChangeChecbox} />
                </Form.Item>
                <Form.Item className='subjectFormBtn'>
                    <Button>
                        取消
                    </Button>
                    <Button htmlType="submit">
                        保存
                    </Button>
                </Form.Item>
            </Form>

        </div>
    </div>
};
export default subjectService;
